<template>
	<div id="container" @resize="change">
		<div class="layout-breadcrumb">
			<Breadcrumb>
				<rightnav :head=til></rightnav>
				<p>这里是主页</p>
				<div class="chart">
					<div id="myChart">
					</div>
				</div>
				<div class="chart">

					<div id="myChart1">
					</div>
				</div>
			</Breadcrumb>
		</div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	import rightnav from '../../rightNav/rightNav'
	export default {
		data() {
			return {
				til: [{
					title: " 首页 ",
					Link: "/Home/"
				}],
				option: '',
				option1: '',
				width: "",
				myChart: "",
				myChart1: "",
			}
		},
		computed: {
			getlinks: function() {
				return this.$store.state.e_change;
			}
		},
		watch: {
			getlinks(val) {
				this.resizeCharts();
				this.myChart.resize();
				this.myChart1.resize();
				this.myChart.setOption(this.option)
				this.myChart1.setOption(this.option1)
			}
		},
		mounted() {
			this.width = document.getElementById("container").offsetWidth;
			this.option = {
				title: {
					text: '11月用户新增人数记录'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['', '', '', '玩家新增人数', '代理新增人数']
					//
				},
				grid: {
					left: '4%',
					right: '4%',
					bottom: '0%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['周一', '周二', "周三"],
					"axisLabel": {
						interval: 0
					}
				},
				
				yAxis: {
					type: 'value'
				},
				series: [{
						name: '玩家新增人数',
						type: 'line',
						stack: '总量',
						data: [120, 132, 145]
					},
					{
						name: '代理新增人数',
						type: 'line',
						stack: '总量',
						data: [220, 182, 145]
					}
				]
			};
			this.option1 = {
				title: {
					text: '11月用户新增人数记录'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['', '', '', '玩家新增人数', '代理新增人数']
					//
				},
				grid: {
					left: '4%',
					right: '4%',
					bottom: '0%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['周一', '周二', "周三"],
					"axisLabel": {
						interval: 0
					}
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: '玩家新增人数',
						type: 'line',
						stack: '总量',
						data: [120, 132, 145]
					},
					{
						name: '代理新增人数',
						type: 'line',
						stack: '总量',
						data: [220, 182, 145]
					}
				]
			};
			this.myChart = echarts.init(document.getElementById("myChart"))
			this.myChart1 = echarts.init(document.getElementById("myChart1"))
			this.resizeCharts();
			this.myChart.resize();
			this.myChart1.resize(); //这个一定要有，要不然myChart的高度会有问题
			this.myChart.setOption(this.option)
			this.myChart1.setOption(this.option1)
		},
		methods: {
			resizeCharts() {
				let chartBox = document.getElementsByClassName('chart')[0];
				let chartBox1 = document.getElementsByClassName('chart')[1];
				document.getElementById("myChart").style.width = chartBox.offsetWidth + 'px'
				document.getElementById("myChart").style.height = chartBox.offsetHeight + 'px'
				document.getElementById("myChart1").style.width = chartBox1.offsetWidth + 'px'
				document.getElementById("myChart1").style.height = chartBox1.offsetHeight + 'px'
			},
			change() {
				this.width = document.getElementById("container").offsetWidth;
				this.myChart.resize();
				this.myChart1.resize(); //这个一定要有，要不然myChart的高度会有问题
				this.setOption(option)
				this.myChart1.setOption(option1)
			}
		},
		components: {
			rightnav
		}
	}
</script>
<style scoped="scoped" lang="less">
	#container {
		height: 100%;
	}
	
	.layout-breadcrumb {
		padding: 10px 15px 0;
	}
	
	.chart {
		width: 100%;
		height: 40%;
		min-height: 250px;
		margin-top: 20px;
	}
</style>